<template xmlns:el="http://www.w3.org/1999/html">
  <el-row align="middle">
    <el-col :span="3" align="left" style="line-height: 60px">
      <el-button class="left-button" icon="caret-left" />
      <!--刷新按钮-->
      <el-button class="left-button" icon="refresh" @click="reload" />
      <!--      <el-icon><caret-left /></el-icon> -->
      <!--      <el-icon><Refresh /></el-icon>-->
    </el-col>
    <el-col :span="13" align="left">
      <!--面包屑导航-->
      <MyBreadcrumbComponent />
    </el-col>
    <el-col :span="8">
      <el-badge :value="12" class="item" style="margin-right: 30px; display: inline-block; margin-top: 10px; cursor: pointer">
        <el-icon><Bell /></el-icon>
      </el-badge>
      <el-dropdown @command="handleCommand">
        <div class="head-con">
          <PictureComponent :picUrl="authStore.getLoginUser()?.headImgUrl" :previewEnabled="false" />
          <span class="head-nickname">
            <!--            {{ store.getters.getLoginUser?store.getters.getLoginUser.nickName:'' }}-->
            {{ authStore.getLoginUser()?.nickName }}
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="user">
              <el-icon><User /></el-icon>
              个人中心</el-dropdown-item
            >
            <el-dropdown-item command="updatePassword">
              <el-icon><Key /></el-icon>
              密码修改</el-dropdown-item
            >
            <el-dropdown-item command="logout" divided>
              <el-icon><SwitchButton /></el-icon>
              退出</el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-col>
  </el-row>
  <!--修改密码对话框-->
  <UserPasswordEditDialog ref="passwordEditDialogRef" />
</template>

<script lang="ts" setup>
import MyBreadcrumbComponent from '@/components/MyBreadcrumbComponent.vue';
import PictureComponent from '@/components/base/other/PictureComponent.vue';
import UserPasswordEditDialog from '@/views/index/UserPasswordEditDialog.vue';
import { onMounted, inject, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useAuthStore } from '@/stores/auth';
import { logout } from '@/api/mes/index';
import type { User } from '@/types/interface/auth_interface';

// 刷新当前路由
// 获取父组件的路由对象
const reload = inject('reload');

// 导入路由
const router = useRouter(); // 创建路由对象
//创建store对象
const authStore = useAuthStore();
// 修改密码对话框的ref对象
const passwordEditDialogRef = ref();
// 点击菜单事件
const handleCommand = async (command: string | number) => {
  if (command === 'logout') {
    // 如果是注销
    await logout();
    // 清除登录信息
    authStore.handleLogoutSuccess();
    router.push('/login');
  } else if (command === 'user') {
    // 如果是用户
    router.push('/backstage/user');
  } else if (command === 'updatePassword') {
    // 如果要修改密码
    passwordEditDialogRef.value!.openDialog();
  }
};

// 定义接收用户信息。后面作废。因为靠这个并不能和store的信息变化同步，必须要直接调用store信息
const loginUser = ref<User | undefined>({});

onMounted(async () => {
  // 获取当前登录账户信息，并存储到vuex
  await authStore.getLoginUserFromRemote();
  // 定义接收用户信息。后面作废。因为靠这个并不能和store的信息变化同步，必须要直接调用store信息
  // loginUser.value = authStore.getLoginUser();
});
</script>

<style lang="scss" scoped>
.el-menu--horizontal {
  /*右侧界面的头部导航条，高度默认是60*/
  border-bottom: none; /*菜单默认有底部边框，但因为本页面在el-header已经设置了底部边框，为了不重复到样底部边框加粗，故取消*/
}
.el-icon:not(:first-child) {
  /*除了第一张图片，其他都有左边距。后面修改为按钮，此样式保留，不生效*/
  margin-left: 10px;
}
.left-button {
  margin-top: -6px; //避免覆盖头部的下划线
  height: 60px;
  border: none;
  margin-left: 0px; /*去掉按钮的默认12px的左边距*/
}
.left-button:hover {
  /*按钮经过时的样式*/
  background: #f4f4f5;
}

.head-con {
  display: flex;
  cursor: pointer;
  background-color: #fff;
  margin-top: 1px;
}
.head-con:hover {
  background-color: rgba(255, 255, 255, 0.44);
}
.head-nickname {
  margin-top: 4%;
}
</style>
